/*摄影长廊区逻辑代码
------------------------------------------------------------------*/

/*摄影长廊区 JSON 数据
------------------------------------------------------------*/
var photoGalleryJson = {
    "ret": true,
    "data": {
        "photoGalleryList01": [{
            "id": "0001",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175330128.jpg"
        },{
            "id": "0002",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175323123.jpg"
        },{
            "id": "0003",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175318533.jpg"
        },{
            "id": "0004",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175309816.jpg"
        },{
            "id": "0005",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175279091.jpg"
        },{
            "id": "0006",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175299484.jpg"
        },{
            "id": "0007",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175330128.jpg"
        },{
            "id": "0008",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175330128.jpg"
        },{
            "id": "0009",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175330128.jpg"
        },{
            "id": "0010",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175323123.jpg"
        },{
            "id": "0011",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175323123.jpg"
        },{
            "id": "0012",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175318533.jpg"
        },{
            "id": "0013",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175309816.jpg"
        },{
            "id": "0014",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175309816.jpg"
        },{
            "id": "0015",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175309816.jpg"
        },{
            "id": "0016",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175299484.jpg"
        },{
            "id": "0017",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175299484.jpg"
        },{
            "id": "0018",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175318533.jpg"
        },{
            "id": "0019",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175299484.jpg"
        },{
            "id": "0020",
            "imgSrc": "https://oss.static.nubia.cn/gallery/151175299484.jpg"
        }],
        "photoGalleryList02": [{
            "id": "0001",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794525823.jpg"
        },{
            "id": "0002",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794610192.jpg"
        },{
            "id": "0003",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794594426.jpg"
        },{
            "id": "0004",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794603779.jpg"
        },{
            "id": "0005",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794580865.jpg"
        },{
            "id": "0006",
            "imgSrc": "https://oss.static.nubia.cn/gallery/14979456296.jpg"
        },{
            "id": "0007",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794525823.jpg"
        },{
            "id": "0008",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794525823.jpg"
        },{
            "id": "0009",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794610192.jpg"
        },{
            "id": "0010",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794594426.jpg"
        },{
            "id": "0011",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794603779.jpg"
        },{
            "id": "0012",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794580865.jpg"
        },{
            "id": "0013",
            "imgSrc": "https://oss.static.nubia.cn/gallery/14979456296.jpg"
        },{
            "id": "0014",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794525823.jpg"
        },{
            "id": "0015",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794525823.jpg"
        },{
            "id": "0016",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794610192.jpg"
        },{
            "id": "0017",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794594426.jpg"
        },{
            "id": "0018",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794603779.jpg"
        },{
            "id": "0019",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794580865.jpg"
        },{
            "id": "0020",
            "imgSrc": "https://oss.static.nubia.cn/gallery/14979456296.jpg"
        },{
            "id": "0021",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794525823.jpg"
        },{
            "id": "0022",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794610192.jpg"
        },{
            "id": "0023",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794594426.jpg"
        },{
            "id": "0024",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794603779.jpg"
        },{
            "id": "0025",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794580865.jpg"
        },{
            "id": "0026",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794610192.jpg"
        },{
            "id": "0027",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794594426.jpg"
        },{
            "id": "0028",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794603779.jpg"
        },{
            "id": "0029",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794580865.jpg"
        },{
            "id": "0030",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794610192.jpg"
        },{
            "id": "0031",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794594426.jpg"
        },{
            "id": "0032",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794603779.jpg"
        },{
            "id": "0033",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794580865.jpg"
        },{
            "id": "0034",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794610192.jpg"
        },{
            "id": "0035",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794594426.jpg"
        },{
            "id": "0036",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794603779.jpg"
        },{
            "id": "0037",
            "imgSrc": "https://oss.static.nubia.cn/gallery/149794580865.jpg"
        }]
    }
}

//获取 content01 所有图片最外层元素
var content01ImgWrapper = document.querySelector(".content01-img-wrapper");

//选出 photoGalleryList01 方便使用
var photoGalleryList01Data = photoGalleryJson.data.photoGalleryList01;


//创建 content01 区域图片
createImages(photoGalleryList01Data, content01ImgWrapper);


//获取 content02 所有图片最外层元素
var content02ImgWrapper = document.querySelector(".content02-img-wrapper");


var photoGalleryList02Data = photoGalleryJson.data.photoGalleryList02;

//创建 content02 区域图片
createImages(photoGalleryList02Data, content02ImgWrapper);


//动态创建图片方法
function createImages(data, wrapper) {

    for (var i = 0;i < data.length;i ++) {

        var listImgSrc = data[i].imgSrc;

        wrapper.innerHTML += `<div class="img-box">
                                            <img src="` + listImgSrc + `" />
                                          </div>`
    }    
}



/*遮罩层
-------------------------------------------------------------------------*/
//获取遮罩层最外层包裹元素
var maskLayerWrapper = document.getElementsByClassName("mask-layer-wrapper")[0];

//获取左侧图片外层包裹元素
var oLeftImg = document.getElementsByClassName("left-img")[0];

var maskCloseBtn = document.getElementsByClassName("mask-close-btn")[0];

//获取 content01 范围内的所有 div 元素
var aContent01Div = content01ImgWrapper.getElementsByTagName("div");


function createMask(ele) {
    for (var i = 0;i < ele.length;i ++) {

        ele[i].onclick = function (params) {
            // console.log(this.innerHTML);
            for (var i = 0;i < ele.length;i ++) {
                ele[i].style.transform = "scale(0)"
            }
            maskLayerWrapper.style.display = "block";
            maskLayerWrapper.style.opacity = "1";
            
            oLeftImg.innerHTML = this.innerHTML;
    
            var oLeftInnerImg = oLeftImg.getElementsByTagName("img")[0];
    
            if (oLeftInnerImg.offsetWidth > "660") {
                oLeftInnerImg.style.width = "100%";
                oLeftInnerImg.style.height = "auto";
                
                oLeftInnerImg.style.position = "absolute";
                oLeftInnerImg.style.left = 0;
                oLeftInnerImg.style.top = "50%";
                oLeftInnerImg.style.marginTop = - (oLeftInnerImg.offsetHeight/ 2) + "px";
    
            }
    
        }
    }    
}

createMask(aContent01Div);


maskCloseBtn.onclick = function (params) {
    maskLayerWrapper.style.opacity = "0";
    maskLayerWrapper.style.display = "none"; 
    oLeftImg.innerHTML = "";
    for (var i = 0;i < aContent01Div.length;i ++) {
        aContent01Div[i].style.transform = "scale(1.0)";
    }
    for (var i = 0;i < aContent02Div.length;i ++) {
        aContent02Div[i].style.transform = "scale(1.0)";
    }
}

//获取 content02 范围内的所有 div 元素
var aContent02Div = content02ImgWrapper.getElementsByTagName("div");

createMask(aContent02Div);